import React from 'react';
import { Layout, Menu, theme } from 'antd';
import { 
    DashboardOutlined, 
    UserOutlined, 
    GiftOutlined,
    DatabaseOutlined
} from '@ant-design/icons';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { RouterAuth } from "../../router/routerAuth";

const { Header, Sider, Content } = Layout;

const AdminLayout = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    
    const location = useLocation();
    
    const menuItems = [
        {
            key: 'promotion-rules',
            icon: <GiftOutlined />,
            label: <Link to="/admin/promotion-rules">促销规则</Link>,
        },
        {
            key: 'torrent-management',
            icon: <DatabaseOutlined />,
            label: <Link to="/admin/torrent-management">种子评论</Link>,
        },
        
        {
            key: 'user-management',
            icon: <UserOutlined />,
            label: <Link to="/admin/user-management">用户管理</Link>,
        }
    ];
    
    const selectedKey = menuItems.find(item => 
        location.pathname.includes(item.key)
    )?.key || 'dashboard';

    return (
        <RouterAuth>
        <Layout style={{ minHeight: '100vh' }}>
            <Sider
                breakpoint="lg"
                collapsedWidth="0"
                width={220}
                style={{
                    background: colorBgContainer,
                    boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
                }}
            >
                <div className="logo" style={{
                    height: '64px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '18px',
                    fontWeight: 'bold'
                }}>
                    管理员面板
                </div>
                <Menu
                    theme="light"
                    mode="inline"
                    selectedKeys={[selectedKey]}
                    items={menuItems}
                    style={{ borderRight: 0 }}
                />
            </Sider>
            <Layout>
                <Header style={{
                    padding: 0,
                    background: colorBgContainer,
                    boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)'
                }} />
                <Content style={{
                    margin: '24px 16px',
                    padding: 24,
                    minHeight: 280,
                    background: colorBgContainer,
                    borderRadius: '8px'
                }}>
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
        </RouterAuth>
    );
};

export default AdminLayout;